<script setup lang="ts">
import { ESLoading } from "earthsdk-ui";
import { ref } from "vue";
const loading = ref(true);
</script>

<template>
  <div style="width: 300px; height: 100px" v-loading="loading"></div>
  <div style="width: 300px; height: 100px">
    <ESLoading :loadingText="'加载中...'" :color="'#fff'"></ESLoading>
  </div>
  <div style="width: 300px; height: 100px">
    <ESLoading loadingType="l1" :loadingText="'加载中...'" :color="'red'"></ESLoading>
  </div>
  <div style="width: 300px; height: 100px">
    <ESLoading
      loadingType="l2"
      :loadingText="'加载中...'"
      :color="'green'"
    ></ESLoading>
  </div>
  <div style="width: 300px; height: 100px">
    <ESLoading
      loadingType="l3"
      :loadingText="'加载中...'"
      :color="'yellow'"
    ></ESLoading>
  </div>
  <div style="width: 300px; height: 100px">
    <ESLoading
      loadingType="l4"
      :loadingText="'加载中...'"
      :color="'purple'"
    ></ESLoading>
  </div>
  <div style="width: 300px; height: 100px">
    <ESLoading
      loadingType="l5"
      :loadingText="'加载中...'"
      :color="'black'"
    ></ESLoading>
  </div>
</template>
